<div class="table-responsive-vertical md-whiteframe-z1">
    <!-- TODO: Replace table to table component when https://github.com/angular/material/issues/796 will closed -->
    <md-toolbar class="md-table-toolbar md-default">
    <div class="md-toolbar-tools">
        <span>Nutrition</span>
    </div>
    </md-toolbar>

    <!-- exact table from live demo -->
    <md-table-container>
    <table md-table md-row-select multiple ng-model="selected" class="table table-hover table-bordered" >
        <thead md-head md-order="query.order" md-on-reorder="vm.getItems()">
        <tr md-row>
            <th md-column md-numeric>ID</th>
            <th md-column md-order-by="nameToLower"><span>Dessert (100g serving)</span></th>
            <th md-column md-numeric md-order-by="calories.value"><span>Calories</span></th>
            <th md-column md-numeric>Fat (g)</th>
            <th md-column md-numeric>Carbs (g)</th>
        
        </tr>
        </thead>
        <tbody md-body>
        <tr md-row md-select="item" md-select-id="name" md-auto-select ng-repeat="item in vm.tableData">
            <td md-cell>{{item.id}}</td>
            <td md-cell>{{item.issue}}</td>
            <td md-cell>{{item.progress}}</td>
            <td md-cell>{{item.status}}</td>
            <td md-cell>
                <md-progress-linear class="table-progress {{item.class}}"
                    md-mode="determinate"
                    value={{item.progress}}>
                </md-progress-linear>
            </td>

            
            
        </tr>
        </tbody>
    </table>
    </md-table-container>

    <md-table-pagination md-limit="query.limit" md-limit-options="[5, 10, 15]" md-page="query.page" md-total="{{vm.totalItems}}" md-on-paginate="vm.getItems()" md-page-select></md-table-pagination>
</div>